<template>
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="icon">
      <div class="act_img" v-if="showBanner">
        <img
          v-for="(item,index) in list"
          :Key="index"
          :src="item.icon.indexOf('http://') == -1 ? `http://img.580travel.com${item.icon}`:item.icon"
          @click="jump(item.url,item)"
          alt
        />
      </div>

      <div class="icon" v-if="showIcoin">
        <div v-for="(item,index) in list" :Key="index" class="item" @click="jump(item.url,item)">
          <img
            :src="item.icon.indexOf('http://') == -1 ? `http://img.580travel.com${item.icon}`:item.icon"
            alt
          />
          <p>{{item.name}}</p>
        </div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { List } from 'vant';
import weixin from '@/components/wx/wx.js';
import { baseUrl } from '@/config/env';
export default {
  data() {
    return {
      list: [], // 二级
      list1: [], // 一级
      pic: '',
      id: this.$route.query.id,
      showBanner: false,
      showIcoin: false,
      parentName: '',
      error: false,
      loading: false,
      finished: false,
      pageNum: 1
    };
  },
  created() {
    this.icon1(); // 获取一级路由列表
    // this.icon(); // 获取二级路由列表
  },
  mounted() {},
  methods: {
    initWxChat() {
      const url = window.location.href.split('#')[0];
      const param = {
        title: this.parentName,
        desc: '',
        link:
          baseUrl + 'entrance/goto?redir=' + window.location.href.split('#')[1],
        imgUrl: this.pic,
        localUrl: url
      };
      weixin.wxChat(this, param);
    },
    icon() {
      if (!this.finished) {
        setTimeout(() => {
          this.$http
            .post('/routerNavigation/list', {
              rLevel: '2',
              parentId: this.id,
              pageNum: this.pageNum++
            })
            .then(res => {
              console.log(res, '11111111');
              if (res.data.code === '0') {
                if (res.data.object.list[0].isLast === '1') {
                  this.showBanner = true;
                } else {
                  this.showIcoin = true;
                }
                this.loading = false;
                this.list.push(...res.data.object.list);
                if (res.data.object.isLastPage) {
                  this.finished = true;
                  console.log(111);
                }
              }
            });
        }, 500);
      }
    },
    icon1() {
      this.$http
        .post('/routerNavigation/list', {
          rLevel: '1',
          parentId: ''
        })
        .then(res => {
          console.log(res);
          if (res.data.code === '0') {
            this.list1 = res.data.object.list;
            this.search();
            console.log(this.list1);
          }
        });
    },
    search() {
      this.list1.map(item => {
        if (item.id + '' === this.id + '') {
          this.parentName = item.name;
          document.title = this.parentName;
          if (item.icon.indexOf('http://') === -1) {
            this.pic = 'http://img.580travel.com' + item.icon;
          } else {
            this.pic = item.icon;
          }
        }
      });
      this.initWxChat();
    },
    jump(page, item) {
      if (page.indexOf('http') === -1) {
        if (item.isLast === '1') {
          this.$router.push(page);
        } else {
          this.$router.push({
            path: page,
            query: { id: item.id, pid: this.id }
          });
        }
      } else {
        window.location.href = page;
      }
    }
  },
  components: {
    'van-list': List
  }
};
</script>
<style lang="scss" scoped>
.act_img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  img {
    width: 710px;
    margin-top: 30px;
  }
}
.icon {
  width: 100%;
  display: flex;
  flex-direction: row;
  // justify-content: space-around;
  flex-wrap: wrap;
  background-color: #ffffff;
  align-items: center;
  .item {
    position: relative;
    width: 185px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .hot {
      width: 50px;
      position: absolute;
      top: 0;
      right: 10px;
    }
    img {
      width: 81px;
    }
    p {
      font-size: 24px;
      color: #616161;
      margin-top: 20px;
    }
  }
}
.bottom_item {
  margin-top: 30px;
  width: 750px;
  height: 440px;
  background-color: #ffffff;
  .botttom_title {
    display: flex;
    flex-direction: row;
    padding-left: 30px;
    padding-top: 30px;
    img {
      width: 50px;
    }
    p {
      font-size: 30px;
      letter-spacing: 1px;
      color: #303030;
      padding-left: 20px;
    }
  }
  .card {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    img {
      width: 334px;
      margin-top: 30px;
    }
  }
}
</style>
